import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    ImageBackground,
    ScrollView,
    Alert,
    InteractionManager,
    TouchableOpacity
} from 'react-native';
import {Button, Input} from 'react-native-elements'
import {StackActions} from 'react-navigation';
import {Toast} from 'teaset'
import {Picker} from 'react-native-ui-lib'

import Global from '../common/global'
import Util from '../common/util'
import Api from '../common/api'
import colors from '../common/colors'
import {loginSuccess} from "../actions/mineAction";
import store from "../store/store";


export default class RegisterInfo extends Component {

    static navigationOptions = {
        header: null
    }

    constructor(props) {
        super(props);

        this.state = {
            un: '',
            dept: '',
            job: '',
            deptList: [],
            isLoading: false,
        };
    }

    changLoadingStatus = (isLoading) => {
        this.setState({
            isLoading
        })
    }


    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            Util.fetchPost(Api.depts, {})
                .then(({code, msg, data}) => {
                    if (code == '0') {
                        this.setState({
                            deptList: data.list
                        })
                    } else {
                        Toast.fail(msg)
                    }
                }).catch(error => {
                console.log(error);
                this.hideSplashScreen()
            });
        })
    }

    submit = () => {
        let {phone, pwd} = this.props.navigation.state.params
        let {un, dept, job} = this.state
        if (!un) {
            Toast.info('姓名不能为空')
            return
        }
        if (!dept) {
            Toast.info('部门不能为空')
            return
        }
        if (!job) {
            Toast.info('职务不能为空')
            return
        }

        this.changLoadingStatus(true)
        Util.fetchPost(Api.register, {
            phone,
            pwd,
            un,
            dept: dept.value,
            job
        })
            .then(({code, msg, data}) => {
                this.changLoadingStatus(false)
                if (code == '1') {
                    Toast.fail(msg)
                } else if (code == '0') {
                    Alert.alert(
                        '个人信息提交成功',
                        '审核通过后方可登录后台',
                        [
                            {
                                text: '确定', onPress: () => {
                                    this.props.navigation.dispatch(StackActions.popToTop());
                                }
                            },
                        ],
                        {cancelable: false}
                    )
                } else {
                    Toast.fail('账号已存在,请去登录')
                }
            }).catch(error => {
            this.changLoadingStatus(false)
            console.log(error)
            Toast.fail(Util.ErrorMessage)
        });


    }

    render() {
        return (
            <View style={styles.container}>
                <ImageBackground
                    source={require('../images/bsign_g.png')}
                    style={styles.bgImage}
                >
                    <ScrollView style={{flex: 1}}>
                        <View style={styles.view}>
                            <Text style={[styles.title, {marginBottom: 20}]}>海洋环境应急指挥</Text>
                            <Text style={[styles.title, {marginBottom: 60}]}>填写个人信息</Text>
                            <Input
                                placeholder='请填写真实姓名'
                                placeholderTextColor={"#ccc"}
                                containerStyle={[styles.containerStyle, {marginBottom: 20}]}
                                inputStyle={styles.inputStyle}
                                onChangeText={(un) => this.setState({un})}
                                maxLength={30}
                                leftIcon={
                                    <Text style={styles.label}>姓名</Text>
                                }
                                selectionColor={"#fff"}
                                inputContainerStyle={[styles.inputContainerStyle]}
                            />
                            <View style={[styles.inputContainerStyle, {
                                marginBottom: 20, flexDirection: 'row',
                                alignItems: 'center', paddingHorizontal: 15
                            }]}>
                                <Text style={[styles.label, {marginRight: 12}]}>部门</Text>
                                <View style={{flex : 1, height : 44,  justifyContent : 'center'}}>
                                    <Picker
                                        placeholder="请选择部门"
                                        placeholderTextColor={"#ccc"}
                                        value={this.state.dept}
                                        onChange={item => this.setState({dept: item})}
                                        topBarProps={{title: '部门'}}
                                        style={{
                                            color: '#fff',
                                            fontSize: 14,
                                            width: Global.width - 120,
                                            height : 44,
                                        }}
                                        hideUnderline
                                    >
                                        {this.state.deptList.map((v, i) => (
                                            <Picker.Item key={v.id}
                                                         value={v.id}
                                                         label={v.dept}
                                            />
                                        ))}
                                    </Picker>
                                </View>
                            </View>

                            <Input
                                placeholder='请填写自己所担任的职务'
                                placeholderTextColor={"#ccc"}
                                containerStyle={[styles.containerStyle, {marginBottom: 40}]}
                                inputStyle={styles.inputStyle}
                                onChangeText={(job) => this.setState({job})}
                                maxLength={50}
                                selectionColor={"#fff"}
                                leftIcon={
                                    <Text style={styles.label}>职务</Text>
                                }
                                inputContainerStyle={[styles.inputContainerStyle]}
                            />
                            <Button
                                title="提交"
                                onPress={this.submit}
                                loading={this.state.isLoading}
                                titleStyle={{fontSize: 16, color: '#fff'}}
                                buttonStyle={{
                                    backgroundColor: "#176DD7",
                                    width: Global.width - 56,
                                    height: 45,
                                    borderRadius: 4
                                }}
                                containerStyle={{marginBottom: 20}}
                            />
                            <View style={{
                                flexDirection: 'row',
                                alignItems: 'center',
                                justifyContent: 'center',
                                width: Global.width,
                                paddingHorizontal: 23
                            }}>
                                <Button
                                    clear
                                    onPress={() => {
                                        this.props.navigation.goBack()
                                    }}
                                    title="上一步"
                                    titleStyle={{fontSize: 14, color: '#fff', textAlign: 'right'}}
                                    buttonStyle={styles.link}
                                />

                            </View>
                        </View>
                    </ScrollView>
                </ImageBackground>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    bgImage: {
        flex: 1,
        top: 0,
        left: 0,
        width: Global.width,
        height: Global.height,
        justifyContent: 'center',
        alignItems: 'center',
    },
    view: {
        width: Global.width,
        height: Global.height,
        justifyContent: 'center',
        alignItems: 'center',
        paddingBottom: Global.paddingBottom + 50
    },
    title: {
        fontSize: 20,
        color: '#fff',
        fontWeight: 'bold',
    },
    inputContainerStyle: {
        width: Global.width - 56,
        height: 45,
        borderRadius: 4,
        borderWidth: 1,
        borderColor: '#D5D5D5',
        marginRight: 0
    },
    label: {
        color: '#fff',
        fontSize: 14
    },
    inputStyle: {
        color: '#fff',
        fontSize: 14,
    },
    containerStyle: {
        width: Global.width - 56,
        height: 45,
    },
    link: {
        height: 20,
    }
});
